<template>
	<view class="content">
		<view class="user roundrect" v-if="hasLogin">
			<image class="avatar" :src="userinfo.avatarUrl" />
			<text class="nickname">{{userinfo.nickName}}</text>
		</view>
		<view class="user roundrect" v-if="!hasLogin" @click="getUserinfo">
			<image class="avatar" src="../../static/image/avatar.png" />
			<text class="nickname">点击登录</text>
		</view>
		<view class="column roundrect">
			<u-cell size="large" icon="heart" :border="false" :iconStyle="iconStyle" title="喜欢" @click="collection"
				clickable>
			</u-cell>
		</view>

		<view class="column roundrect">
			<u-cell size="large" icon="question-circle" :border="false" :iconStyle="iconStyle" title="常见问题"
				@click="help" clickable>
			</u-cell>
			<u-line color="#dfdfdf" length="90%" margin="0 auto"></u-line>
			<u-cell size="large" icon="setting" :border="false" :iconStyle="iconStyle" title="设置" @click="setting"
				clickable>
			</u-cell>
			<u-line color="#dfdfdf" length="90%" margin="0 auto"></u-line>
			<u-cell size="large" icon="kefu-ermai" :border="false" :iconStyle="iconStyle" title="联系我们" clickable
				@click="contactUs">
			</u-cell>
		</view>
		<view class="column roundrect">
			<u-cell size="large" icon="level" :border="false" :iconStyle="iconStyle" title="成为创作者" url="/pages/user/join"
				clickable>
			</u-cell>
		</view>
		<view class="column roundrect">
			<u-cell size="large" icon="share" :border="false" :iconStyle="iconStyle" title="分享给朋友" @click="share"
				clickable>
			</u-cell>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				userinfo: {
					avatarUrl: 'https://cdn.uviewui.com/uview/album/1.jpg'
				},
				iconStyle: {
					"color": "#536BF6",
					"font-size": "40rpx"
				},
				afterLogin: ''
			};
		},
		onLoad() {
			this.userinfo = this.userInfo;
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			help() {
				uni.navigateTo({
					url: "/pages/user/help"
				})
			},
			setting() {
				uni.navigateTo({
					url: "/pages/user/setting"
				})
			},
			contactUs() {
				tt.openAwemeUserProfile()
			},
			share() {

			},
			//收藏
			collection() {
				this.afterLogin = 'collection'
				if (!this.hasLogin) {
					this.getUserinfo()
				} else {
					uni.navigateTo({
						url: "/pages/user/collection"
					})
				}
			},
			//获取用户信息、授权
			getUserinfo(e) {
				// #ifdef MP-QQ
				this.toutiaoLogin('qq');
				// #endif
				// #ifdef MP-TOUTIAO
				this.toutiaoLogin('toutiao');
				// #endif
			},
			//抖音登录
			toutiaoLogin(provider) {
				uni.login({
					provider: provider,
					success: (data) => {
						let code = data.code;
						uni.getUserInfo({
							success: (info) => {
								this.userinfo = info.userInfo;
								let obj = {
									code,
									nickname: this.userinfo.nickName,
									avatar: this.userinfo.avatarUrl,
									platform: this.$api.platfrom,
									invite_code: this.inviteId,
								}
								this.$api.login(obj).then(result => {
									console.log(result)
									if (result.code == 1) {
										let token = uni.getStorageSync("token")
										this.userinfo.token = token;
										this.userinfo.userId = result.data.user_id;
										this.is_authoriization = true;
										this.login(this.userinfo);
										if (this.afterLogin == 'collection') {
											this.collection()
										}
									}
								})
							}
						})
					}

				})

			},
			...mapMutations(['login', 'logout'])
		},

	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
	}

	.u-slot-value {
		line-height: 17px;
		text-align: center;
		font-size: 10px;
		padding: 0 5px;
		height: 17px;
		color: #fff;
		border-radius: 100px;
		background-color: #f56c6c;
	}

	.user {
		height: 130rpx;
		display: flex;
		align-items: center;

		image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50rpx;
			margin-left: 20rpx;
			padding: 5rpx;
		}

		.nickname {
			margin-left: 20rpx;
			font-size: 28rpx;
		}

		.login {
			height: 40rpx;
			border: 2rpx solid $uni-color-primary;
		}
	}

	.column {
		margin-top: 20rpx;
		// padding-top: 15rpx;
	}

	.roundrect {
		border-radius: 20rpx;
		box-shadow: 0 0 30rpx #dddddd;
	}
</style>
